<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('漫画章节 列表')"/>
    <th:block th:include="include :: select2-css"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse" hidden>
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>漫画名称：</label>
                            <select name="nameId" class="form-control m-b" th:with="type=${MhNameDataAll}">
                                <option value=""></option>
                                <option th:each="map : ${type}" th:text="${map.value}" th:value="${map.key}"></option>
                            </select>
                        </li>

                        <!-- <li>
                             <label>章节名称：</label>
                             <select class="form-control" name="name" id="name">
                                 <option value="">&#45;&#45;选择篇章&#45;&#45;</option>

                             </select>
                         </li>-->

                        <!--<li>
                            <a class="btn btn-primary btn-rounded btn-sm" id="chapter_search" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>-->
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="manhua:chapter:add">
                <i class="fa fa-plus"></i> 添加
            </a>
            <a class="btn btn-primary single disabled" onclick="$.operate.edit()"
               shiro:hasPermission="manhua:chapter:edit">
                <i class="fa fa-edit"></i> 修改
            </a>
            <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()"
               shiro:hasPermission="manhua:chapter:remove">
                <i class="fa fa-remove"></i> 删除
            </a>
            <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="manhua:chapter:export">
                <i class="fa fa-download"></i> 导出
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('manhua:chapter:edit')}]];
    var removeFlag = [[${@permission.hasPermi('manhua:chapter:remove')}]];
    var prefix = ctx + "manhua/chapter";
    var prefix_name = ctx + "manhua/name";

    var prefix_page = ctx + "manhua/page";

    $(function () {
        var options = {
            url: prefix + "/list",
            queryParams: queryParams,
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            /* pagination:false,*/
            modalName: "漫画章节 ",
            columns: [{
                checkbox: false
            },
                {
                    field: 'id',
                    title: '章节的顺序',
                    visible: false
                },
                {
                    field: 'nameName',
                    title: '漫画名称',
                    formatter: function (value, row, index) {
                        return $.common.reale({value: value, numder: 1});
                    }
                },
                {
                    field: 'nameId',
                    title: '漫画id',
                    formatter: function (value, row, index) {
                        return $.common.reale({value: value, numder: 3});
                    }
                },

                {
                    field: 'name',
                    title: '章节名称',
                    formatter: function (value, row, index) {
                        return $.common.reale({value: value, numder: 1});
                    }
                },
                {
                    field: 'nameOrder',
                    title: '章节顺序',
                    formatter: function (value, row, index) {
                        return $.common.reale({value: value, numder: 2});
                    }
                },
                /* {
                     field: 'remark',
                     title: '备注'
                 },*/
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="page(\'' + row.id + '\',\'' + row.nameId + '\')"><i></i>查看章节</a> ');
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);


    });

    function queryParams(params) {
        let search = $.table.queryParams(params);
        search.nameId = [[${nameId}]];
        return search;
    }

    /*跳转篇章页面*/
    let page = (id, nameId) => {
        const url = prefix_page + "/" + id + "/" + nameId;
        $.modal.openOptions({
            url: url,
            title: "章节页",
            height: ($(window).height()),
            width: ($(window).width() - 50),
            btn: false
        });
    }

    /*漫画名称:加载阅读前十的数据*/
    let QianWu = () => {
        $.operate.get(prefix_name + "/getQianWu", function (result) {
            if (result.code == web_status.SUCCESS) {
                let data = result.data;
                for (var i = 0; i < data.length; i++) {
                    $("#datalist").append("<option value=" + data[i].id + "," + data[i].name + "/>");
                }
            }
        });
    }


    /*漫画名称：模糊查询*/
    $("input[name='getNameId']").keyup(function () {

        /*selectName();*/
        let config = {
            url: prefix_name + "/list",
            type: "post",
            dataType: "json",
            data: {name: nameId},
            success: function (result) {
                if (result.code == 0) {
                    let data = result.rows;
                    /*清空之前的数据*/
                    $("#datalist").empty();
                    if (data.length != 0) {
                        for (var i = 0; i < data.length; i++) {
                            $("#datalist").append("<option value=" + data[i].id + "," + data[i].name + "/>");
                        }
                    } else {
                        $("#datalist").append("<option value=" + '没有查询出结果' + "/>");
                    }
                } else {
                    $.modal.alertError(data.msg);
                }
            }
        };
        $.ajax(config);

    })


    let selectName = () => {
        let nameId = $("input[name='getNameId']").val();
        /*如果已经选中 请求篇章的数据*/
        if (nameId.indexOf(",") != -1) {
            let id_name = nameId.split(",");
            let numder = parseInt(id_name[0]);
            if (!isNaN(numder)) {

                let config = {
                    url: prefix + "/selectList",
                    type: "post",
                    dataType: "json",
                    data: {nameId: numder},
                    success: function (result) {
                        if (result.code == web_status.SUCCESS) {
                            let data = result.data;
                            if (data.length != 0) {
                                $("#name").empty();
                                $("select[name='name']").append("<option value=''>-选择篇章--</option>");
                                for (var i = 0; i < data.length; i++) {
                                    $("select[name='name']").append("<option value=" + data[i].name + ">" + data[i].name + "</option>");
                                }
                            } else {
                                $("#name").empty();
                            }
                        } else {
                            $.modal.alertError(data.msg);
                        }
                    }
                };
                $.ajax(config);

            } else {
                $.modal.alertError("不是数字");
            }
            return;
        }
    }
</script>
</body>
</html>